import Link from 'next/link';
import Image from 'next/image';
import {Flex,} from 'antd'
import NaviBar from "@/app/components/home/navibar";
import UserBar from "@/app/components/home/userbar";

const toolBarStyle: React.CSSProperties = {
  width: '24%',
  alignContent:"center",
  height: 64,
};

const homeLogoStyle: React.CSSProperties = {
  width: '16%',
  justifyContent:"center",
  display:"flex",
  alignItems:'center',
};
const navBarStyle: React.CSSProperties = {
  width:'60%',
  alignContent:"center",
  display:"flex"
};

const titleStyle:React.CSSProperties = {
    display:'flex',
    color:'#000000FF',
    justifyContent:'center',
    alignItems:"center",
    alignContent:"center",
    height:'100%',
    fontWeight:'bold'
}

// @ts-ignore
export default function TopBar({}){
  return (
    <Flex vertical={false} >
      <div style={homeLogoStyle}>
        <Link href={'/home'} style={{display:'flex',justifyContent:'center',alignContent:"center",height:40}}>
          <Image src="/home1.jpg"
                 width={64}
                 height={40}
                 priority={true}
                 alt={"主页"}
          />
          <span style={titleStyle}>Further Star</span>
        </Link>
      </div>
      <div style={navBarStyle} >
        <NaviBar />
      </div>
      <Flex vertical={false} style={toolBarStyle} justify={"flex-end"} align={"center"}>
        <UserBar />
        <span style={{width:'10%'}}></span>
      </Flex>
    </Flex>
  );
}